<template>
  <keep-alive>
    <transition :name="transition_name">
      <router-view class="view"></router-view>
    </transition>
  </keep-alive>
</template>
<script>
export default {
  data() {
    return {
      transition_name: ""
    };
  },
  created() {
    if (this.global.SCREEN_WIDTH <= 576) {
      setTimeout(() => {
        this.transition_name = "index";
      }, 500);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.view {
  position: absolute;
  top: 0;
  left: 0;
}
.index-enter-active {
  animation: bounce-in 0.3s;
}
.index-leave-active {
  animation: bounce-out 0.3s;
}
@keyframes bounce-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  25% {
    transform: translate3d(75%, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0, 0);
  }
  75% {
    transform: translate3d(25%, 0, 0);
  }
  100% {
    transform: translate3d(0px, 0, 0);
  }
}
@keyframes bounce-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(-25%, 0, 0);
  }
  50% {
    transform: translate3d(-50%, 0, 0);
  }
  75% {
    transform: translate3d(-75%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
</style>